<extend name="Public:mainbase" />
<block name="content">
    <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/dhtmlxtree.css"/>
    <script language="javascript" src="__PUBLIC__/js/member.js?{:time()}"></script>
    <script language="javascript" src="__PUBLIC__/js/Validform_v5.3.2_min.js?{:time()}"></script>
    <link href="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet">
    <script src="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.js"></script>
    <style type="text/css">
        .Validform_checktip{line-height: 34px}
        .operation a{font-size: 18px;}
        .overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:998;width:100%;height:100%;_padding:0 20px 0 0;background:#f6f4f5;display:none;}
        .showbox{position:fixed;top:0;left:50%;z-index:9999;opacity:0;filter:alpha(opacity=0);margin-left:-85px;}
        *html,*html body{background-image:url(about:blank);background-attachment:fixed;}
        *html .showbox,*html .overlay{position:absolute;top:expression(eval(document.documentElement.scrollTop));}
        #AjaxLoading{border:1px solid #8CBEDA;color:#37a;font-size:12px;font-weight:bold;}
        #AjaxLoading div.loadingWord{width:190px;height:58px;line-height:58px;border:2px solid #D6E7F2;background:#fff;}
        #AjaxLoading .loadingPic{margin:10px 15px;float:left;display:inline;}
    </style>
    <!--  内容列表   -->
    <form name="form2" method="post">
        <table width="98%" class="table table-bordered  table-hover table-condensed "  align="center">
            <tr bgcolor="#E7E7E7" >
                <td height="28" colspan="11" background="__PUBLIC__/images/tbg.gif" style="padding-left:10px;">
                    ◆ 列表 &nbsp;&nbsp;&nbsp;&nbsp;<a type="button" class="btn btn-xs btn-warning" href="{:U('getCommonList')}?sid={$Think.get.sid}"><i class="glyphicon glyphicon-plus"></i> 添加内容</a>
                </td>
            </tr>
            <tr align="center" valign="middle" bgcolor="#FBFCE2" height="25" style="vertical-align: middle">
                <td width="6%">ID</td>
                <td width="4%">选择</td>
                <td width="180px">缩略图</td>
                <td>标题</td>
                <td width="10%">类型</td>
                <td width="10%">签发时间</td>
                <td>操作</td>
            </tr>
            <foreach name="contentList" item="val">
                <tr align='center' valign="middle" bgcolor="#FFFFFF" class="canSort" height="101" item_id="{$val.id}" sort_num="{$val.sort}">
                    <td  width="6%" nowrap style="vertical-align: middle;">{$val.id}</td>
                    <td width="4%" style="vertical-align: middle;">
                        <input name="id" type="checkbox" value="{$val.id}" class="np id_input" />
                    </td >
                    <td width="180px" style="vertical-align: middle;"><?php if($val['image_url']) { ?><img src="{$val.image_url}?imageView2/2/w/180/h/101" width="180" height="101"><?php }else{ ?>
                        <img src="/Html/img/defaultpic.gif"  width="180" height="101" alt=""><?php } ?></td>
                    <td style="vertical-align: middle;">
                        <switch name="val.type">
                            <case value="live">
                                {$val.title}
                            </case>
                            <case value="special">
                                <a href="{:U(manageSpecialContent)}?sid={$val.s_theme_id}">{$val.title}</a>
                            </case>
                            <default />default
                        </switch>

                    </td>
                    <td width="10%" style="vertical-align: middle;">{$val.type}</td>
                    <td width="10%"  style="vertical-align: middle;">{$val.update_time|myDate="Y-m-d H:i",###}</td>
                    <td class="operation" style="vertical-align: middle;">
                       <!--  <a href="javascript:;" data-id='{$val.id}' class='editcategory'><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>
                       | -->
                        <a href="javascript:;" data-id='{$val.id}' class='delcategory'><i class="fa fa-trash-o" aria-hidden="true"></i></a>
                    </td>
                </tr>
            </foreach>
            <tr bgcolor="#ffffff">
                <td height="36" colspan="11">
                    &nbsp;
                    <a href="javascript:selAll()" class="btn btn-xs btn-info"><i class='glyphicon glyphicon-ok'></i> 全选</a>
                    <a href="javascript:noSelAll()" class="btn btn-xs btn-info"><i class='glyphicon glyphicon-remove'></i> 取消</a>
                    <!-- <a href="javascript:checkArc(0)" class="btn btn-xs btn-info">&nbsp;审核&nbsp;</a> -->
                    <a href="javascript:;" id="delcategoryall" class="btn btn-xs btn-info"><i class="glyphicon glyphicon-trash"></i> 删除</a>
                </td>
            </tr>

            <tr align="right" bgcolor="#F9FCEF">
                <td height="36" colspan="11" align="center">
                    <div class='page'>{$showpage}</div>
                </td>
            </tr>
        </table>
    </form>
    <div class="overlay"></div>
    <div id="AjaxLoading" class="showbox">
        <div class="loadingWord"><span class="loadingPic"><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i></span> 排序中，请稍候...</div>
    </div>
    <style>
        .ui-state-highlight{height: 112px;background:#ececec;}
    </style>
    <script>
        var sortNum;
        var sortedIDs
        var isChange=false;

        function ShowLoading() {

            $(".overlay").css({ 'display': 'block', 'opacity': '0.8' });

            $(".showbox").stop(true).animate({ 'margin-top': '300px', 'opacity': '1' }, 200);

        }

        function HiddenLoading() {

            $(".showbox").stop(true).animate({ 'margin-top': '250px', 'opacity': '0' }, 400);

            $(".overlay").css({ 'display': 'none', 'opacity': '0' });

        }

        $( ".table tbody" ).sortable({
            items: "tr.canSort",
            placeholder:"ui-state-highlight",
            forcePlaceholderSize: true,
            cursor: "move",
            start:function(){
                sortNum = $( ".table tbody" ).sortable( "toArray",{attribute:'sort_num'});
            },

            update:function(){
                sortedIDs = $( ".table tbody" ).sortable( "toArray",{attribute:'item_id'} );
                ShowLoading();
                $.ajax({
                    async:false,
                    dataType:'json',
                    url:'{:U("ajaxSetSort")}',
                    data:{sortedIDs:sortedIDs,sortNum:sortNum},
                    success:function(data){
                        if(data.resultCode!=0){
                            $( ".table tbody" ).sortable( "cancel" );
                            alert(data.info);
                        }else{
                            $(".canSort").each(function(i){
                                $(this).attr('sort_num',sortNum[i]);
                            })
                        }
                    },
                    error:function(){
                        $( ".table tbody" ).sortable( "cancel" );
                        alert('修改排序失败！');
                    },
                    complete:function(){
                        HiddenLoading();
                    }
                })
            }
        });
        $( ".table tbody" ).disableSelection();

        $('.delcategory').click(function(){
            var _this=this;
            if(confirm('是否确定删除此内容？')){
                $.get('{:U(delSpecialContent)}',{id:$(_this).data('id')},function(data){
                    alert(data.info);
                    if(data.status==1){
                        $(_this).parents('tr').remove();
                    }
                })
            }
            
        })

        function selAll(){
            $('.id_input').prop('checked',true);
        }
        function noSelAll(){
           $('.id_input').prop('checked',false);
        }

        $("#delcategoryall").click(function(){
            var id=$('.id_input:checked').map(function(){return $(this).val()});
            if(confirm('是否确定删除此内容？')){
                $.get('{:U(delSpecialContent)}',{id:id.get().join()},function(data){
                    alert(data.info);
                    if(data.status==1){
                        location.reload();
                    }
                })
            }
        })


    </script>
</block>